<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background-color: #314559;
    }

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      transform: translate(-50%, -50%) scale(.25);
      transition: all .5s ease;
    }

    .container:hover {
      transform: translate(-50%, -50%) scale(1);
    }

    .container:hover .cube-wrap .cube {
      animation: entrance .5s ease;
    }

    .container:hover .indicators {
      opacity: 1;
    }

    .container .cube-wrap {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1000px;
      transform: translate(-50%, -50%);
      transition: all .5s ease;
      user-select: none;
    }

    .container .cube-wrap .cube {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all .5s ease;
      transform-style: preserve-3d;
      animation: spin 10s linear infinite;
    }

    .container .cube-wrap img {
      max-width: 100%;
      height: 100%;
    }

    .container .cube-wrap .cube .cube-face {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: white;
      overflow: hidden;
      opacity: .9;
      border: 1px solid #ccc;
    }

    .cube-wrap .cube .cube-face.front {
      transform: translateZ(150px);
    }

    .cube-wrap .cube .cube-face.back {
      transform: rotateX(180deg) translateZ(150px);
    }

    .cube-wrap .cube .cube-face.left {
      transform: rotateY(-90deg) translateZ(150px);
    }

    .cube-wrap .cube .cube-face.right {
      transform: rotateY(90deg) translateZ(150px);
    }

    .cube-wrap .cube .cube-face.top {
      transform: rotateX(-90deg) translateZ(150px);
    }

    .cube-wrap .cube .cube-face.bottom {
      transform: rotateX(90deg) translateZ(150px);
    }

    .indicators {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -80px;
      padding: 20px;
      text-align: center;
      opacity: 0;
      transition: opacity .3s;
    }

    .indicators .indicator {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      cursor: pointer;
      background-color: #fafafa;
      margin-right: 6px;
      opacity: .15;
    }

    .controller {
      display: none;
    }

    .controller:nth-of-type(1):checked ~ .cube {
      transform: translateZ(-150px);
    }

    .controller:nth-of-type(2):checked ~ .cube {
      transform: translateZ(-150px) rotateX(-180deg);
    }

    .controller:nth-of-type(3):checked ~ .cube {
      transform: translateZ(-150px) rotateY(90deg);
    }

    .controller:nth-of-type(4):checked ~ .cube {
      transform: translateZ(-150px) rotateY(-90deg);
    }

    .controller:nth-of-type(5):checked ~ .cube {
      transform: translateZ(-150px) rotateX(-90deg);
    }

    .controller:nth-of-type(6):checked ~ .cube {
      transform: translateZ(-150px) rotateX(90deg);
    }

    .controller:nth-of-type(1):checked ~ .indicators .indicator:nth-of-type(1) {
      opacity: 1;
    }

    .controller:nth-of-type(2):checked ~ .indicators .indicator:nth-of-type(2) {
      opacity: 1;
    }

    .controller:nth-of-type(3):checked ~ .indicators .indicator:nth-of-type(3) {
      opacity: 1;
    }

    .controller:nth-of-type(4):checked ~ .indicators .indicator:nth-of-type(4) {
      opacity: 1;
    }

    .controller:nth-of-type(5):checked ~ .indicators .indicator:nth-of-type(5) {
      opacity: 1;
    }

    .controller:nth-of-type(6):checked ~ .indicators .indicator:nth-of-type(6) {
      opacity: 1;
    }

    .cube-left .cube-action {
      left: -75px;
      top: 50%;
      transform: translateY(-50%);
    }

    .cube-right .cube-action {
      right: -75px;
      top: 50%;
      transform: translateY(-50%);
    }

    .cube-action {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      background-color: #fafafa;
      display: none;
      opacity: .15;
      z-index: 5;
      transition: opacity .5s ease;
    }

    .cube-action:hover {
      opacity: 1;
    }

    .cube-action::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 25%;
      height: 25%;
      border-right: 4px solid #111;
      border-bottom: 4px solid #111;
      transform: translate(-60%, -50%) rotate(-45deg);
    }
    .cube-left .cube-action::before{
      transform: translate(-40%, -50%) rotate(135deg);
    }
    .container:hover .controller:nth-of-type(1):checked ~ .cube-left .cube-action:nth-of-type(1),
    .container:hover .controller:nth-of-type(1):checked ~ .cube-right .cube-action:nth-of-type(1){
      display: block;
    }
    .container:hover .controller:nth-of-type(2):checked ~ .cube-left .cube-action:nth-of-type(2),
    .container:hover .controller:nth-of-type(2):checked ~ .cube-right .cube-action:nth-of-type(2){
      display: block;
    }
    .container:hover .controller:nth-of-type(3):checked ~ .cube-left .cube-action:nth-of-type(3),
    .container:hover .controller:nth-of-type(3):checked ~ .cube-right .cube-action:nth-of-type(3){
      display: block;
    }
    .container:hover .controller:nth-of-type(4):checked ~ .cube-left .cube-action:nth-of-type(4),
    .container:hover .controller:nth-of-type(4):checked ~ .cube-right .cube-action:nth-of-type(4){
      display: block;
    }
    .container:hover .controller:nth-of-type(5):checked ~ .cube-left .cube-action:nth-of-type(5),
    .container:hover .controller:nth-of-type(5):checked ~ .cube-right .cube-action:nth-of-type(5){
      display: block;
    }
    .container:hover .controller:nth-of-type(6):checked ~ .cube-left .cube-action:nth-of-type(6),
    .container:hover .controller:nth-of-type(6):checked ~ .cube-right .cube-action:nth-of-type(6){
      display: block;
    }
    @keyframes spin {
      from {
        transform: rotateX(45deg) rotateY(45deg);
      }
      to {
        transform: rotateX(405deg) rotateY(765deg);
      }
    }

    @keyframes entrance {
      from {
        transform: rotateX(-225deg) rotateY(-225deg);
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="cube-wrap">
    <input type="radio" class="controller" name="cuber" id="1" checked>
    <input type="radio" class="controller" name="cuber" id="2">
    <input type="radio" class="controller" name="cuber" id="3">
    <input type="radio" class="controller" name="cuber" id="4">
    <input type="radio" class="controller" name="cuber" id="5">
    <input type="radio" class="controller" name="cuber" id="6">
    <div class="cube">
      <div class="cube-face front"><img src="./images/1.jpg" alt=""></div>
      <div class="cube-face back"><img src="./images/2.jpg" alt=""></div>
      <div class="cube-face left"><img src="./images/3.jpg" alt=""></div>
      <div class="cube-face right"><img src="./images/4.jpg" alt=""></div>
      <div class="cube-face top"><img src="./images/5.jpg" alt=""></div>
      <div class="cube-face bottom"><img src="./images/6.jpg" alt=""></div>
    </div>
    <div class="cube-left">
      <label for="6" class="cube-action"></label>
      <label for="1" class="cube-action"></label>
      <label for="2" class="cube-action"></label>
      <label for="3" class="cube-action"></label>
      <label for="4" class="cube-action"></label>
      <label for="5" class="cube-action"></label>
    </div>
    <div class="cube-right">
      <label for="2" class="cube-action"></label>
      <label for="3" class="cube-action"></label>
      <label for="4" class="cube-action"></label>
      <label for="5" class="cube-action"></label>
      <label for="6" class="cube-action"></label>
      <label for="1" class="cube-action"></label>
    </div>
    <div class="indicators">
      <label for="1" class="indicator"></label>
      <label for="2" class="indicator"></label>
      <label for="3" class="indicator"></label>
      <label for="4" class="indicator"></label>
      <label for="5" class="indicator"></label>
      <label for="6" class="indicator"></label>
    </div>
  </div>
</div>
</body>
</html>
